import React, { useEffect, useState } from "react";
import axios from "axios";
import { List } from "react-vant";
const Index = () => {
  const [list, setList] = useState([]);
  const [pageCode, setPageCode] = useState(1);

  const getList = async () => {
    const resp = await axios.get("/api/list", { params: { pageCode } });
    setList(list.concat(resp.data.data));
    setPageCode(pageCode + 1);
  };

  useEffect(() => {
    getList();
  }, []);

  return (
    <div className="list1">
      <List onLoad={getList}>
        {list.map((v) => {
          return (
            <dl key={v.id}>
              <dt>
                <img src={v.image} alt="" />
              </dt>
              <dd>
                <h3>{v.title}</h3>
                <p>{v.desc}</p>
                <div>
                  <div>
                    <b>{(v.price * v.zhekou) / 100}</b>
                    <span>
                      <s>{v.price}</s>
                    </span>
                  </div>
                  <span>销售： {v.sell}</span>
                </div>
              </dd>
            </dl>
          );
        })}
      </List>
    </div>
  );
};

export default Index;
